<!DOCTYPE html>
<html>
    <head>
        <script>
            function showHint(str){
                var XHR = new XMLHttpRequest();
                if(str.length == 0){
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                }
                XHR.onreadystatechange=function(){
                    if(XHR.readyState == 4 && XHR.status == 200){
                        document.getElementById("txtHint").innerHTML= XHR.responseText;
                    }
                }
                XHR.open("GET","gethint.php?q="+str,true);
                XHR.send();
            }
        </script>
    </head>
    <body>

        <h3>Start typing a name in the input field below:</h3>
        <form action=""> 
            First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
        </form>
        <p>Suggestions: <span id="txtHint"></span></p> 

    </body>
</html>


